<script setup lang="ts">
import { ref } from 'vue';
import { $t } from '@/locales';
import { HolidayType } from '@/constants/custom';

defineOptions({ name: 'HolidaySearch' });

const activeName = ref(['holiday-search']);

interface Emits {
  (e: 'search' | 'reset'): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<Record<string, any>>('modelValue', {
  default: () => {
    return {
      year: '',
      holiday: ''
    };
  }
});
</script>

<template>
  <ElCollapse v-model="activeName">
    <ElCollapseItem :title="$t('common.search')" name="holiday-search">
      <ElForm class="wfull" label-width="80">
        <ElRow :gutter="24">
          <ElCol :lg="6" :md="12" :sm="24">
            <ElFormItem label="年度">
              <ElDatePicker v-model="model.year" placeholder="年度" type="year" value-format="YYYY" clearable />
            </ElFormItem>
          </ElCol>
          <ElCol :lg="6" :md="12" :sm="24">
            <ElFormItem label="放假/调休" prop="holiday">
              <ElSelect v-model="model.holiday">
                <template v-for="item in Object.keys(HolidayType)" :key="item">
                  <ElOption :label="HolidayType[item]" :value="item" />
                </template>
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :lg="12" :md="12" :sm="24">
            <ElFormItem>
              <div class="wfull flex justify-end flex-items-center">
                <ElButton @click="emit('reset')">{{ $t('common.reset') }}</ElButton>
                <ElButton type="primary" @click="emit('search')">{{ $t('common.search') }}</ElButton>
              </div>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElCollapseItem>
  </ElCollapse>
</template>

<style scoped></style>
